<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图书馆管理系统</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href="./css/x-admin.css" media="all">
</head>
<body>
	<!-- 添加 -->
	<div style="display: none;" id="myDiv">
		<form class="layui-form" id="myForm" onsubmit="return false;">
			<input type="text" name="id" style="display: none;" />
			<div class="layui-form-item">
				<label for="level-name" class="layui-form-label"> 会员卡号:</label>
				<div class="layui-input-inline">
					<input type="text" name="memberId" class="layui-input"
						placeholder="num">
				</div>
			</div>
			<div class="layui-form-item">
				<label for="level-name" class="layui-form-label"> 会员名:</label>
				<div class="layui-input-inline">
					<input type="text" name="name" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label for="level-name" class="layui-form-label"> 性别:</label>
				<div class="layui-input-inline">
					<select name="sex">
						<option value="">请选择性别</option>
						<option value="男">男</option>
						<option value="女">女</option>
					</select>
				</div>
			</div>
			<div class="layui-form-item">
				<label for="level-name" class="layui-form-label"> 身份:</label>
				<div class="layui-input-inline">
					<select name="category">
						<option value="">请选择身份</option>
						<option value="0">老师</option>
						<option value="1">学生</option>
					</select>
				</div>
			</div>
			<div class="layui-form-item">
				<label for="level-name" class="layui-form-label"> 身份证号:</label>
				<div class="layui-input-inline">
					<input type="text" name="card" class="layui-input"
						placeholder="num">
				</div>
			</div>
			<div class="layui-form-item">
				<label for="level-name" class="layui-form-label"> 系:</label>
				<div class="layui-input-inline">
					<select name="department">
						<option value="">请选择系</option>
						<option value="贸易经济系">贸易经济系</option>
						<option value="计算机系">计算机系</option>
						<option value="数学系">数学系</option>
					</select>
				</div>
			</div>
			<div class="layui-form-item">
				<label for="level-name" class="layui-form-label"> 专业:</label>
				<div class="layui-input-inline">
					<select name="profession">
						<option value="">请选择专业</option>
						<option value="网络营销">网络营销</option>
						<option value="计算机">计算机</option>
						<option value="线性函数">线性函数</option>
					</select>
				</div>
			</div>
			<div class="layui-form-item">
				<label for="level-name" class="layui-form-label"> 年级:</label>
				<div class="layui-input-inline">
					<select name="grade">
						<option value="">请选择年级</option>
						<option value="18级">18级</option>
						<option value="19级">19级</option>
						<option value="20级">20级</option>
					</select>
				</div>
			</div>
			<div class="layui-form-item">
				<label for="level-name" class="layui-form-label"> 电话:</label>
				<div class="layui-input-inline">
					<input type="text" name="phone" placeholder="num"
						class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label for="level-name" class="layui-form-label"> 入会时间:</label>
				<div class="layui-input-inline">
					<input type="text" name="regdate" id="shijian" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label for="level-name" class="layui-form-label"> 状态:</label>
				<div class="layui-input-inline">
					<select name="status">
						<option value="">请选择状态</option>
						<option value="0">不在阅览室</option>
						<option value="6006">落霞与孤鹜齐飞</option>
						<option value="6007">秋水共长天一色</option>
						<option value="6008">书山有路勤为径</option>
						<option value="6009">学海无涯苦作舟</option>
						<option value="6010">路漫漫其修远兮</option>
						<option value="6011">吾将上下而求索</option>
						<option value="6012">黑发不知勤学早</option>
						<option value="6013">白首方悔读书迟</option>
					</select>
				</div>
			</div>
			<div class="layui-form-item">
				<button class="layui-btn" id="bc" lay-filter="bc" lay-submit="">
					添加</button>
			</div>
		</form>
	</div>

	<!-- 编辑 -->
	<div style="display: none;" id="myDivSet">
		<form class="layui-form" lay-filter="myFormVal" id="myFormSet"
			onsubmit="return false;">
			<input type="text" name="id" style="display: none;" />
			<div class="layui-form-item">
				<label for="level-name" class="layui-form-label"> 会员卡号:</label>
				<div class="layui-input-inline">
					<input type="text" name="memberId" class="layui-input"
						placeholder="num" disabled="disabled">
				</div>
			</div>
			<div class="layui-form-item">
				<label for="level-name" class="layui-form-label"> 会员名:</label>
				<div class="layui-input-inline">
					<input type="text" name="name" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label for="level-name" class="layui-form-label"> 性别:</label>
				<div class="layui-input-inline">
					<select name="sex">
						<option value="">请选择性别</option>
						<option value="男">男</option>
						<option value="女">女</option>
					</select>
				</div>
			</div>
			<div class="layui-form-item">
				<label for="level-name" class="layui-form-label"> 身份:</label>
				<div class="layui-input-inline">
					<select name="category">
						<option value="">请选择身份</option>
						<option value="0">老师</option>
						<option value="1">学生</option>
					</select>
				</div>
			</div>
			<div class="layui-form-item">
				<label for="level-name" class="layui-form-label"> 身份证号:</label>
				<div class="layui-input-inline">
					<input type="text" name="card" class="layui-input"
						placeholder="num">
				</div>
			</div>
			<div class="layui-form-item">
				<label for="level-name" class="layui-form-label"> 系:</label>
				<div class="layui-input-inline">
					<select name="department">
						<option value="">请选择系</option>
						<option value="贸易经济系">贸易经济系</option>
						<option value="计算机系">计算机系</option>
						<option value="数学系">数学系</option>
					</select>
				</div>
			</div>
			<div class="layui-form-item">
				<label for="level-name" class="layui-form-label"> 专业:</label>
				<div class="layui-input-inline">
					<select name="profession">
						<option value="">请选择专业</option>
						<option value="网络营销">网络营销</option>
						<option value="计算机">计算机</option>
						<option value="线性函数">线性函数</option>
					</select>
				</div>
			</div>
			<div class="layui-form-item">
				<label for="level-name" class="layui-form-label"> 年级:</label>
				<div class="layui-input-inline">
					<select name="grade">
						<option value="">请选择年级</option>
						<option value="18级">18级</option>
						<option value="19级">19级</option>
						<option value="20级">20级</option>
					</select>
				</div>
			</div>
			<div class="layui-form-item">
				<label for="level-name" class="layui-form-label"> 电话:</label>
				<div class="layui-input-inline">
					<input type="text" name="phone" placeholder="num"
						class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label for="level-name" class="layui-form-label"> 入会时间:</label>
				<div class="layui-input-inline">
					<input type="text" name="regdate" class="layui-input"
						disabled="disabled">
				</div>
			</div>
			<div class="layui-form-item">
				<label for="level-name" class="layui-form-label"> 状态:</label>
				<div class="layui-input-inline">
					<select name="status" disabled="disabled">
						<option value="">请选择状态</option>
						<option value="0">不在阅览室</option>
						<option value="6006">落霞与孤鹜齐飞</option>
						<option value="6007">秋水共长天一色</option>
						<option value="6008">书山有路勤为径</option>
						<option value="6009">学海无涯苦作舟</option>
						<option value="6010">路漫漫其修远兮</option>
						<option value="6011">吾将上下而求索</option>
						<option value="6012">黑发不知勤学早</option>
						<option value="6013">白首方悔读书迟</option>
					</select>
				</div>
			</div>
			<div class="layui-form-item">
				<button type="submit" class="layui-btn" lay-submit=""
					id="updateMeme" lay-filter="updateMemeber">修改</button>
			</div>
		</form>
	</div>

	<!-- 查询 -->
	<div class="x-body">
		<form id="form_product" class="layui-form x-center"
			onsubmit="return false" style="width: 95%">
			<div class="layui-form-pane" style="margin-top: 15px;">
				<div class="layui-form-item">
					<div class="layui-input-inline" style="width: 200px"
						id="category_radio">
						<input type="radio" lay-filter="teacher" id="category"
							name="category" value="0" title="老师"> <input type="radio"
							lay-filter="student" id="category" name="category" value="1"
							title="学生">
					</div>
					<div id="departmentProfessionGrade">
						<div class="layui-input-inline" style="width: 120px">
							<select id="department" name="department">
								<option value="">请选择系</option>
								<option value="贸易经济系">贸易经济系</option>
								<option value="计算机系">计算机系</option>
								<option value="数学系">数学系</option>
							</select>
						</div>
						<div class="layui-input-inline" style="width: 120px">
							<select id="profession" name="profession">
								<option value="">请选择专业</option>
								<option value="网络营销">网络营销</option>
								<option value="计算机">计算机</option>
								<option value="线性函数">线性函数</option>
							</select>
						</div>
						<div class="layui-input-inline" style="width: 120px">
							<select id="grade" name="grade">
								<option value="">请选择年级</option>
								<option value="18级">18级</option>
								<option value="19级">19级</option>
								<option value="20级">20级</option>
							</select>
						</div>
					</div>
					<div class="layui-input-inline" style="width: 80px">
						<input type="text" id="name" name="name" placeholder="会员名"
							autocomplete="off" class="layui-input">
					</div>
					<div class="layui-input-inline" style="width: 80px">
						<input type="text" id="memberId" name="memberId"
							placeholder="会员卡号" autocomplete="off" class="layui-input">
					</div>
					<div class="layui-input-inline" style="width: 80px">
						<input type="text" id="phone" name="phone" placeholder="手机号"
							autocomplete="off" class="layui-input">
					</div>
					<div class="layui-input-inline" style="width: 150px">
						<input type="text" id="beginRegdate" name="beginRegdate"
							placeholder="起始时间" autocomplete="off" class="layui-input">
					</div>
					<div class="layui-input-inline" style="width: 150px">
						<input type="text" id="endRegdate" name="endRegdate"
							placeholder="结束时间" autocomplete="off" class="layui-input">
					</div>
					<div class="layui-input-inline" style="width: 120px">
						<select id="status" name="status">
							<option value="">请选择状态</option>
							<option value="0">不在阅览室</option>
							<option value="6006">落霞与孤鹜齐飞</option>
							<option value="6007">秋水共长天一色</option>
							<option value="6008">书山有路勤为径</option>
							<option value="6009">学海无涯苦作舟</option>
							<option value="6010">路漫漫其修远兮</option>
							<option value="6011">吾将上下而求索</option>
							<option value="6012">黑发不知勤学早</option>
							<option value="6013">白首方悔读书迟</option>
						</select>
					</div>
					<div class="layui-input-inline" style="width: 80px">
						<button class="layui-btn" lay-submit="" lay-filter="chaXun">
							<i class="layui-icon">&#xe608;</i>查询
						</button>
					</div>
				</div>
			</div>
		</form>
	</div>
	<script type="text/html" id="toolbarDemo">
		<div class="layui-btn-container">
			<button class="layui-btn layui-btn-danger"  lay-event="delAll">
				<i class="layui-icon">&#xe640;</i>批量删除
			</button>
			<button class="layui-btn layui-btn" lay-event="add">添加</button>
			<button class="layui-btn layui-btn" lay-submit="" lay-filter="set">重置状态</button>
		</div>
	</script>
	<script type="text/html" id="barDemo">
  		<a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
  		<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  		<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
	</script>
	<table id="demo" lay-filter="test" lay-data="{id: 'idTest'}"></table>
	<script src="./lib/layui/layui.js" charset="utf-8"></script>
	<script src="./js/x-layui.js" charset="utf-8"></script>
	<script>
		var table, layer, form, laydate, $;
		layui.use([ 'table', 'layer', 'laydate', 'form' ], function(){
		  	table = layui.table;
			layer = layui.layer;
			form = layui.form;
			laydate = layui.laydate;
			$ = layui.$;
  
  			//执行一个laydate实例
			laydate.render({
				elem : '#beginRegdate' //指定元素
				,type: 'datetime'
			});
			laydate.render({
				elem : '#endRegdate' //指定元素
				,type: 'datetime'
			});
			laydate.render({
				elem : '#shijian' //指定元素
				,type: 'datetime'
			});
  
		  //第一个实例
		  table.render({
		    elem: '#demo'
		    ,height: 600
		    ,url: '../getByWhere' //数据接口
		    ,toolbar : '#toolbarDemo'
		    ,id : 'memeberTable'
		    ,page : true //开启分页
		    ,cols: [[ //表头
		       {type: 'checkbox',fixed: 'left'}
		      ,{field: 'id', title: 'ID',width:65,sort: true}
		      ,{field: 'memberId', title: '会员卡号',width:100}
		      ,{field: 'name', title: '会员名',width:85}
		      ,{field: 'sex', title: '性别',width:55} 
		      ,{field: 'category', title: '身份',width:60,templet : function(res){
														if (res.category=="0") {
															return '<div>老师</div>';
														} else if (res.category=="1") {
															return '<div>学生</div>';
														} else{
															return '';
														}
													}}
		      ,{field: 'card', title: '身份证号'}
		      ,{field: 'department', title: '系',width:110}
		      ,{field: 'profession', title: '专业',width:100}
		      ,{field: 'grade', title: '年级',width:75}
		      ,{field: 'phone', title: '电话',width:110}
		      ,{field: 'regdate', title: '入会时间'}
		      ,{field: 'status', title: '状态',width:100,templet: '#statusTpl'} 
		      ,{fixed : 'right',width : 180,align : 'center',toolbar : '#barDemo'}
		    ]]
		  });
		  		form.on('radio(teacher)', function(){
 					$("#departmentProfessionGrade").hide();
				});
				form.on('radio(student)', function(){
 					$("#departmentProfessionGrade").show();
				});  
		  		
  				form.on('submit(chaXun)', function(data) {
					table.reload("memeberTable", {
						where : { //设定异步数据接口的额外参数，任意设
							category : $("#category_radio input:checked").val(),
							department : $("#department").val(),
							profession : $("#profession").val(),
							grade : $("#grade").val(),
							name : $("#name").val(),
							memberId : $("#memberId").val(),
							phone : $("#phone").val(),
							beginRegdate : $("#beginRegdate").val(),
							endRegdate : $("#endRegdate").val(),
							status : $("#status").val()
						},page : {
							curr : 1
									//重新从第 1 页开始
						}
					});
						return false;
				});
				
				// 添加会员信息
				//监听事件
				table.on('toolbar(test)', function(obj) {
				var checkStatus = table.checkStatus(obj.config.id);
				
					console.log(obj);
					var arr = [];
					for(var i = 0;i<checkStatus.data.length;i++){
						var id = checkStatus.data[i].id;
						arr.push(id);
					}
					console.log(arr.join(","));	
					switch (obj.event) {
					case 'add':
						layer.open({
							type : 1,
							content : $('#myDiv'), //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
							area : [ '500px', '700px' ]
						});
						break;
					case 'delAll':
						layer.confirm('真的删除行么', function() {
							$.post("../delMemeberByIds", {
									ids: arr.join(",")
								}, function(res) {
									layer.msg(res.msg);
									if (res.code == "0") {
										layer.closeAll();
										table.reload("MemeberTable");
									}
								}, "json");
						});	
						break;
					}
					;
				});
				form.on('submit(bc)', function(data) {
					$.post("../addMemeber", $("#myForm").serialize(),
						function(res) {
							if (res.code == "0") {
								layer.msg(res.msg);
								table.reload("memeberTable");
								layer.closeAll('page');
							} else {
								layer.msg(res.msg);
							}
					}, "json");
					return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
				});
				
				//监听工具条 
				table.on('tool(test)', function(obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
					var data = obj.data; //获得当前行数据
					var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）

					if (layEvent === 'detail') { //查看
						// 隐藏
						$("#updateMeme").hide();
						// 给form表单赋值
						form.val("myFormVal",data);
						layer.open({
							type : 1,
							content : $('#myDivSet'), //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
							area : [ '500px', '650px' ]
						});
					} else if (layEvent === 'del') { //删除
						layer.confirm('真的删除行么', function(index) {
							$.post("../delMemeberById", {
								id : data.id
							}, function(res) {
								layer.msg(res.msg);
								if (res.code == "0") {
									layer.closeAll();
									table.reload("MemeberTable");
								}
							}, "json");
								obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
								layer.close(index);
								//向服务端发送删除指令
						});			
					} else if (layEvent === 'edit') { //编辑
						$("#myFormSet")[0].reset();
						// 给form表单赋值
						form.val("myFormVal", data);
						layer.open({
							type : 1,
							content : $('#myDivSet'),
							//这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
							area : [ '500px', '700px' ]
						});			
					}
				});
				
				// 编辑
				form.on('submit(updateMemeber)', function() {
					$.post("../updateMemeber", $("#myFormSet").serialize(), function(res) {
							if (res.code == "0") {
								layer.msg(res.msg);
								table.reload("memeberTable");
								layer.closeAll('page');
							} else {
								layer.msg(res.msg);
							}
					}, "json");
					return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
				});
	
				// 重置状态
				form.on('submit(set)', function() {
					$.post("../setStatus", {}, function(res) {
							if (res.code == "0") {
								layer.msg(res.msg);
								table.reload("memeberTable");
								layer.closeAll('page');
							} else {
								layer.msg(res.msg);
							}
					}, "json");
					return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
				});
				
		});
	</script>
	<script type="text/html" id="statusTpl">
  		{{#  if(d.status == 0){ }}
    		<span>不在阅览室</span>
  		{{#  } else { }}
    		{{d.status}}
  		{{#  } }}
	</script>
</body>
</html>